<template>
  <div class="main-content">
    <el-form
      ref="sForm"
      :model="getListData"
      label-position="left"
      :inline="true"
    >
      <el-row style="margin-right: 20px">
        <el-form-item label="花型编号" prop="no">
          <el-input
            v-model="getListData.no"
            placeholder="请输入"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="花型等级" prop="level">
          <el-input
            v-model="getListData.level"
            placeholder="请输入"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="物料库存" prop="stock">
          <el-input
            v-model="getListData.stock"
            placeholder="请输入"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="花高" prop="height">
          <el-input
            v-model="getListData.height"
            placeholder="请输入"
            clearable
            oninput="value=value.replace(/[^\d.]/g,'')"
          ></el-input>
        </el-form-item>
        <el-form-item label="克重" prop="weight">
          <el-input
            v-model="getListData.weight"
            placeholder="请输入"
            clearable
            oninput="value=value.replace(/[^\d.]/g,'')"
          ></el-input>
        </el-form-item>
        <el-form-item label="是否公开" prop="weight">
          <el-select v-model="getListData.is_public" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled">
            </el-option>
          </el-select>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="创建日期" prop="planned_quantity">
          <el-date-picker
            v-model="getListData.created"
            type="daterange"
            range-separator="->"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="公布日期" prop="planned_quantity">
          <el-date-picker
            v-model="getListData.publish_time"
            type="daterange"
            range-separator="->"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="更新日期" prop="planned_quantity">
          <el-date-picker
            v-model="getListData.updated"
            type="daterange"
            range-separator="->"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>

        <el-row>
          <el-button
            size="medium"
            class="filter-item"
            type="primary"
            @click="getList"
            >查询</el-button
          >
          <el-button size="medium" class="filter-item" @click="resetSearch"
            >重置</el-button
          >

          <el-button
            size="medium"
            class="filter-item"
            type="primary"
            @click="handleCreate"
            >新增花型
          </el-button>
          <el-button size="medium" type="success" @click="importComfirm"
            >批量导入花型</el-button
          >


          <el-button size="medium" type="success" @click="importComfirm1"
            >批量导入花型图片</el-button
          >
          <el-button
            size="medium"
            type="success"
            @click="openDialog1"
            >批量公开花型</el-button
          >
          <el-button size="medium" type="success" @click="openDialog2"
            >批量设置查看人员</el-button
          >
        </el-row>
      </el-row>
    </el-form>

    <p>花型库列表</p>
    <el-table :data="tableData" style="width: 100%" border="" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="30" ></el-table-column>
      <!-- <el-table-column prop="pid" label="花型id" width="100" align="center">
        <template slot-scope="{ row }">
          <span style="color: #66acf1">{{ row.pid }}</span>
        </template>
      </el-table-column> -->
      <el-table-column prop="picture" label="图片" width="120" align="center">
        <template slot-scope="{ row }">
          <el-image
            style="width: 98px; height: 60px"
            :src="row.picture_thumb"
            v-if="row.picture_thumb!=''"
          ></el-image>
          <el-image
            style="width: 98px; height: 60px"
            :src="baseurl + row.picture"
            v-else></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="no" label="花型编号" width="100" align="center">
        <template slot-scope="{ row }">
          <router-link :to="`flowerInfo/${row.pid}/0/${row.similarity_value}`">
            <span style="color: #66acf1">{{ row.no }}</span>
          </router-link>
        </template>
      </el-table-column>
      <el-table-column prop="level" label="花型等级" width="80" align="center">
      </el-table-column>
      <el-table-column prop="stock" label="物料库存" width="100" align="center">
      </el-table-column>
      <el-table-column prop="purpose" label="用途" width="100" align="center">
      </el-table-column>
      <el-table-column prop="design" label="款式" width="100" align="center">
      </el-table-column>
      <el-table-column
        prop="widthheight"
        label="幅宽(高对高)"
        width="150"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="widthlow"
        label="幅宽(低对低)"
        width="150"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="height" label="花高" width="100" align="center">
      </el-table-column>
      <el-table-column prop="weight" label="克重" width="100" align="center">
      </el-table-column>
      <el-table-column
        prop="created"
        label="创建日期"
        width="120"
        align="center"
        :formatter="formatterTime"
      >
      </el-table-column>
      <el-table-column
        prop="publish_time"
        label="公布日期"
        width="120"
        align="center"
        :formatter="formatterTime"
      >
      </el-table-column>
      <!-- <el-table-column
        prop="updated"
        label="更新日期"
        width="120"
        align="center"
        :formatter="formatterTime"
      >
      </el-table-column> -->

      <el-table-column
        prop="publicDate"
        label="花型年份/月份"
        width="120"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="viewName"
        label="查看人"
        width="160"
        align="center"
      >
      </el-table-column>
      <el-table-column label="操作" align="center" width="180">
        <template slot-scope="{ row }">
          <el-button size="mini" title="生成缩略图" icon="el-icon-picture" circle @click="handleEdit(row)">

          </el-button>
          <el-button size="mini" type="text" @click="handleEdit(row)">编辑</el-button>
          <el-popconfirm
            confirm-button-text="确认"
            cancel-button-text="取消"
            title="确认删除当前数据？"
            @confirm="deleteRow(row.pid)"
            style="margin-left: 10px"
          >
            <el-button size="mini" type="text" slot="reference">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      style="text-align: right"
      v-show="totalPage > 0"
      :total="totalPage"
      :page.sync="getListData.pageNo"
      :limit.sync="getListData.pageSize"
      @pagination="getList"
    ></pagination>

    <!--新建或编辑花型-->
    <el-dialog
      :title="textMap[dialogStatus] + '花型'"
      :visible.sync="dialogVisible"
      width="60%"
      top="5vh"
    >
      <el-form
        :model="form"
        ref="acForm"
        label-position="left"
        label-width="150px"
        :inline="true"
        :rules="rules"
      >
        <el-form-item
          label="花型图片"
          prop="picture"
        >
          <el-upload
            action=""
            class="avatar-uploader"
            :show-file-list="false"
            :http-request="upload"
          >
            <el-image
              style="margin-left: 50px"
              v-if="form.picture"
              :src="baseurl + form.picture"
              class="avatar"
            ></el-image>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>

<!--          <el-upload-->
<!--            class="upload-demo"-->
<!--            action="string"-->
<!--            accept="image/jpeg,image/png,image/jpg"-->
<!--            list-type="picture-card"-->
<!--            :on-preview="handlePictureCardPreview"-->
<!--            :file-list="form.picture"-->
<!--            :http-request="upload"-->
<!--            :on-remove="handleUpRemove"-->
<!--            @click.native.prevent=""-->
<!--          >-->
<!--            <el-button-->
<!--              size="small"-->
<!--              type="primary"-->
<!--              @click.native.prevent="imgSaveToUrl('flagImg')"-->
<!--              >点击上传</el-button>-->
<!--          </el-upload>-->
          <el-dialog :visible.sync="dialogImg" append-to-body>
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </el-form-item>
        <el-row>
          <el-form-item label="花型编号" prop="no">
            <el-input clearable v-model="form.no"></el-input>
          </el-form-item>
          <el-form-item label="厂家" prop="factory">
            <el-input clearable v-model="form.factory"></el-input>
          </el-form-item>
          <el-form-item label="花型单位(m)" prop="unit">
            <el-input clearable v-model="form.unit"></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="花型克重" prop="weight">
            <el-input
              clearable
              v-model="form.weight"
              oninput="value=value.replace(/[^\d.]/g,'')"
            ></el-input>
          </el-form-item>
          <el-form-item label="花型成分" prop="component">
            <el-input clearable v-model="form.component"></el-input>
          </el-form-item>
          <el-form-item label="物料库存" prop="stock">
            <el-input
              clearable
              v-model="form.stock"
              oninput="value=value.replace(/[^\d.]/g,'')"
            ></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="幅宽(高对高)(cm)" prop="widthheight">
            <el-input
              clearable
              v-model="form.widthheight"
              oninput="value=value.replace(/[^\d.]/g,'')"
            ></el-input>
          </el-form-item>
          <el-form-item label="幅宽(低对低)(cm)" prop="widthlow">
            <el-input
              clearable
              v-model="form.widthlow"
              oninput="value=value.replace(/[^\d.]/g,'')"
            ></el-input>
          </el-form-item>
          <el-form-item label="花型花高" prop="height">
            <el-input
              clearable
              v-model="form.height"
              oninput="value=value.replace(/[^\d.]/g,'')"
            ></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="是否有效" prop="is_valid">
            <el-select v-model="form.is_valid" placeholder="请选择">
              <el-option
                v-for="i in valid"
                :key="i.id"
                :label="i.value"
                :value="i.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否公布" prop="is_public">
            <el-select v-model="form.is_public" placeholder="请选择">
              <el-option
                v-for="i in ispublic"
                :key="i.id"
                :label="i.value"
                :value="i.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="等级" prop="level">
            <el-select v-model="form.level" placeholder="请选择">
              <el-option v-for="i in level" :key="i" :label="i" :value="i">
              </el-option>
            </el-select>
          </el-form-item>
        </el-row>

        <el-row>

           <el-form-item
            label="花型封板情况"
            prop="sealing_status"
            :rules="[{ required: true, message: '花型封板情况不能为空' }]"
          >

          <el-select v-model="form.sealing_status" placeholder="请选择">
    <el-option
      key="封板"
      label="封板"
      value="封板">
    </el-option>
     <el-option
      key="未封板"
      label="未封板"
      value="未封板">
    </el-option>
  </el-select>

          </el-form-item>


          <el-form-item v-if="form.sealing_status === '封板'"
            label="封板区域"
            prop="plates"
            :rules="[{ required: true, message: '封板区域不能为空' }]"
          >
            <el-cascader
              v-model="form.plates"
              :options="areas"
              :props="{ multiple: true, checkStrictly: true }"
              filterable
              clearable
            ></el-cascader>
          </el-form-item>
        </el-row>

        <el-form-item
          v-for="(item, k) in form.pro"
          :key="k"
          :label="item.name"
          :prop="k"
          :rules="item.is_multiple == 0 ? [{required: item.is_required, message: '必填' }]:[{ type: 'array',required: item.is_required, message: '至少选着一项'  }]"
        >
          <el-select
            v-if="item.is_multiple == 0 && item.rid == 0"
            v-model="form[k]"
            placeholder="请选择"
            @change="PropertyS11(item, k, form[k])"

          >
            <el-option
              v-for="i in Property[k].options"
              :key="i"
              :label="i"
              :value="i"
            >
            </el-option>
          </el-select>

          <el-checkbox-group
            style="width: 900px"
            v-if="item.is_multiple == 1 && item.rid == 0"
            v-model="form[k]"
          >
            <el-checkbox v-for="i in Property[k].options" :key="i" :label="i">{{
              i
            }}</el-checkbox>
          </el-checkbox-group>

          <el-select
            v-if="item.is_multiple == 0 && item.rid != 0"
            v-model="form[k]"
            placeholder="请选择"
          >
            <el-option
              v-for="i in Property[k].options"
              :key="i"
              :label="i"
              :value="i"
            >
            </el-option>
          </el-select>
          <el-checkbox-group
            v-if="item.is_multiple == 1 && item.rid != 0"
            v-model="form[k]"
          >
            <el-checkbox v-for="i in Property[k].options" :key="i" :label="i">{{
              i
            }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-row>
          <el-form-item label="花型年份/月份" prop="publicDate">
            <el-date-picker
              v-model="form.publicDate"
              type="month"
              placeholder="选择月"
              value-format="yyyy-MM"
            ></el-date-picker>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="查看人" > 
          <!-- <template> -->
            <el-select v-model="form.viewId"  multiple placeholder="请选择" clearable filterable >
              <el-option
                v-for="item in accountList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          <!-- </template> -->
        </el-form-item>
        </el-row>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="dialogStatus === 'create' ? updateData('') : updateData()"
          :loading="Uloading"
          >{{ Uloading ? "提交中 ..." : "确 定" }}</el-button
        >
      </span>
    </el-dialog>

    <!-- 导入 -->
    <el-dialog
      title="导入"
      v-loading.fullscreen.lock="loading"
      element-loading-text="正在导入,请稍后..."
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      :visible.sync="importVisible"
      width="30%"
      :close-on-click-modal="false"
    >
      <el-button
        size="medium"
        type="success"
        style="margin-bottom: 10px"
        @click="templateDownload"
        >模板下载</el-button
      >
      <el-upload
        class="upload-demo"
        drag
        action="#"
        :multiple="false"
        :limit="1"
        :auto-upload="false"
        ref="upload"
        :http-request="importPattern"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">
          *只能上传一个文件，若需修改请删除原文件后重新上传
        </div>
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button @click="importVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmImport">导入</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="导入花型照片"

      :visible.sync="importVisible7"
      width="50%"
      :close-on-click-modal="false"
       center
    >
    <span style="margin-left:30px;">上传图片或者文件夹,图片命名以花型编号命名,多张图片以花型编号-数字命名</span>
      <imgUpload v-if="importVisible7" ></imgUpload>
    </el-dialog>

    <!-- <el-dialog
      title="导入花型照片"
      v-loading.fullscreen.lock="loading"
      element-loading-text="正在导入,请稍后..."
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      :visible.sync="importVisible7"
      width="30%"
      :close-on-click-modal="false"
    > -->
      <!-- <el-button
        size="medium"
        type="success"
        class="templateDownload"
        @click="ImgDownload"
        >模板下载</el-button
      > -->
      <!-- <el-upload
        class="upload-demo"
        drag
        action="#"
        :multiple="false"
        :limit="1"
        :auto-upload="false"
        ref="upload"
        :http-request="imgImport"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">
          *文件为zip压缩包,图片命名格式 " 花型编号-图片序号.jpg/png "
        </div>
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button @click="importVisible7 = false">取 消</el-button>
        <el-button type="primary" @click="confirmImport">导入</el-button>
      </span>
    </el-dialog> -->

    <el-dialog
      title="裁切封面"
      :visible.sync="cropperModel"
      width="950px"
      center
    >
      <cropper-image :Name="cropperName" @b="handleUploadSuccess" ref="child">
      </cropper-image>
    </el-dialog>
    <!--查看大封面-->
    <el-dialog title="查看大封面" :visible.sync="imgVisible" center>
      <img :src="imgName" v-if="imgVisible" style="width: 100%" alt="查看" />
    </el-dialog>

    <el-dialog
      title="选择公开日期"
      :visible.sync="publicStatus"
      width="450px"
      center
    >
      公开日期:
      <el-date-picker
        v-model="publicTime"
        type="month"
        placeholder="选择月"
        value-format="yyyy-MM"
      >
      </el-date-picker>
      <span v-show="dateError" style="display: inline-block; margin-left: 5px;color:red;">*请选择日期</span>

      <span slot="footer" class="dialog-footer">
        <el-button @click="publicStatus = false">取 消</el-button>
        <el-button type="primary" @click="publicChangeTime">确定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="批量设置花型查看人员"
      :visible.sync="viewPeople"
      width="750px"
      center
    >
    所有用户:
    <template>
      <el-select v-model="ViewIdlist" multiple placeholder="请选择" clearable filterable style="width: 80%;">
        <el-option
          v-for="item in accountList"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </template>

    <span slot="footer" class="dialog-footer">
        <el-button @click="viewPeople = false">取 消</el-button>
        <el-button type="primary" @click="ChangeViewPeople">确定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="提示"
      :visible.sync="dialogImageCountVisible"
      :close-on-click-modal="false"
      width="30%"
      :before-close="handleClose">
      <span>共有 {{imageCount}} 个图片需要导入</span>
      <el-progress :percentage="progressPercent" v-if="!isNaN(parseInt(progressPercent))"></el-progress>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogImageCountVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleImport" :disabled="btnImportDisable">导 入</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import data from "@/app/utils/areas.json";

import { Message } from "element-ui";
import {
  patternList,
  patternDelete,
  patternImport,
  patternAdd,
  imgImport,
  changePublic,
  getAccountList,
  ChangeViewPeople
} from "@/app/api/pattern";
import { mapState } from "vuex";
import { upload } from "@/app/api/admin";
import { getProperty } from "@/app/api/property";
import Pagination from "@/app/components/Pagination";
import CropperImage from "@/app/views/search/CropperImage";
import imgUpload from '@/app/views/flower/uploadImg'

export default {
  components: {
    Pagination,
    CropperImage,
    imgUpload
  },
  name: "FlowerIndex",
  data() {
    return {
      dateError: false,
      options: [{
        value: '-1',
        label: '全部'
      }, {
        value: '1',
        label: '公开'
      }, {
        value: '0',
        label: '不公开'
      }],
      importVisible: false,
      loading: false,
      tableData: [],
      totalPage: 1,
      listLoading: true,
      getListData: {
        pageNo: 1,
        pageSize: 10,
        is_public: "-1"
      },
      dialogVisible: false,
      form: {
        picture: "",
        is_valid: "",
        is_public: "",
        title: "",
        no: "",
        stock: "",
        unit: "",
        factory: "",
        height: "",
        weight: "",
        level: "",
        component: "",
        widthheight: "",
        widthlow: "",
        is_sealing: "",
        region: "",
        country: "",
        customer_name: "",
        customer_number: "",
        sealing_time: "",
        plates: [],
        pro: {},
        sealing_status:"",
        publicDate: '',
        viewId:[]
      },
      dialogStatus: "", //编辑或新增
      textMap: {
        update: "编辑",
        create: "新增",
      },
      baseurl: api_url,
      sealing: [
        { id: "1", value: "未封装" },
        { id: "2", value: "已封装" },
      ],
      Property: {},
      PropertyS: {},
      level: ["A", "B", "C", "D"],
      ispublic: [
        { id: "0", value: "不公布" },
        { id: "1", value: "公布" },
      ],
      valid: [
        { id: "0", value: "无效" },
        { id: "1", value: "有效" },
      ],
      Uloading: false,
      areas: [],
      dialogImg: false,
      dialogImageUrl: "",
      downloadLoading: false,
      importVisible7: false,
      //裁切图片参数
      cropperModel: false,
      cropperImg: "",
      cropperName: "",
      imgName: "",
      imgVisible: false,
      publicStatus: false,
      viewPeople: false,
      publicTime: "",
      ws: null,
      dialogImageCountVisible: false,
      imageCount: 0,
      progressPercent: 0,
      btnImportDisable: true,
      timer: null,
      rules: {
        publicDate: [{ required: true, message: '请选择年月', trigger: 'change'}],
        picture: [{ required: true, message: '花型图片不能为空' }],
        is_valid: [{ required: true, message: '请选择一项' }],
        is_public: [{ required: true, message: '请选择一项' }],
        level: [{ required: true, message: '请选择一项' }]
      },
      accountList: [],
      ViewIdlist: [],//查看权限人员
      pids:[],
    };
  },

  computed: {
    ...mapState("user", ["session", "account"]),
  },
  created() {
    let that = this;

    this.areas = data;
    this.getProperty();
    this.getList();
    this.getAccountList();

    // web socket
    this.ws = new WebSocket(ws_url);

    this.ws.onopen = function() {
      console.log("连接成功");
    };

    this.ws.onmessage = function(e) {
      let data = JSON.parse(e.data);
      console.log(data)

      let command = data.command;

      // 读取文件数量
      if (command == "files") {
        that.dialogImageCountVisible = true;
        that.imageCount =data.data;
        // that.imageCount =1;

        if (that.imageCount > 0) {
          that.btnImportDisable = false;
        }
      }

      // 读取导入数量
      if (command == "import_images_count") {
        let count = parseInt(data.data);
        if (count == 0) {
          clearInterval(that.timer);
          that.progressPercent = 100;
        } else {
          let p = parseInt((that.imageCount - count) * 100 / that.imageCount);
          that.progressPercent = p;
        }
      }

      // 导入开始
      if (command == "import") {
        that.timer = setInterval(function(){
          let command = {
            "command": "import_images_count"
          }

          that.ws.send(JSON.stringify(command));
        },1000);
      }
    };
  },
  methods: {
    handleSelectionChange(selection) {
      let pidsData=[];
      for (let index = 0; index < selection.length; index++) {
        const  pid = selection[index]['pid'];
        pidsData.push(pid)
      }  
      this.pids = pidsData;
    },
    handleClose() {
      this.dialogImageCountVisible = false;
      this.progressPercent = 0;
    },
    handleImport() {
      let that = this;
      this.btnImportDisable = true;
      // 发送导入指令
      if (this.ws != null) {
        let command = {
          "command": "import"
        };

        this.ws.send(JSON.stringify(command));
      }
    },
    //导入
    importComfirm() {
      this.importVisible = true;
      this.$nextTick(() => {
        this.$refs["upload"].clearFiles();
      });
    },
    //花型图片导入
    importComfirm1() {
      if (this.ws != null) {
        let command = {
          "command": "files"
        };

        this.ws.send(JSON.stringify(command));
      }
    },
    resetSearch() {
      this.$refs["sForm"].resetFields();
      this.getListData = {
        pageNo: 1,
        pageSize: 10,
      };
      // this.getListData.status = "";
      this.getList();
    },
    confirmImport() {
      this.loading = true;
      this.$nextTick(() => {
        this.$refs.upload.submit();
      });
    },

    importPattern(param) {
      const fileObj = param.file;
      const form = new FormData();
      form.append("file", fileObj);
      patternImport(form)
        .then((res) => {
          console.log("import_score res", res);
          Message({
            message: "导入成功",
            type: "success",
            duration: 2 * 1000,
          });
          this.loading = false;
          this.importVisible = false;
          this.getList();
        })
        .catch((error) => {
          console.log("import_score error", error);
          this.loading = false;
          this.importVisible = false;
        });
    },
    templateDownload() {
      window.location.href = this.baseurl + "/template/pattern.xlsx";
    },
    formatterTime(row, column) {
      let data = row[column.property];
      return /\d{4}-\d{1,2}-\d{1,2}/g.exec(data);
    },
    getList() {
      patternList(this.getListData)
        .then((res) => {
          this.tableData = res.data.ret;
          // console.log(res.data.ret);
          this.totalPage = res.data.count;
          this.listLoading = false;
        })
        .catch((error) => {
          console.log("studentSourceList error", error);
        });
    },
    getAccountList() {
      getAccountList(this.pid)
        .then((res) => {
          this.accountList = res.data;
        })
        .catch((error) => {
          console.log("studentSourceList error", error);
        });
    },
    deleteRow(pid) {
      patternDelete({ pid })
        .then((res) => {
          if (res.code == "00000") {
            Message({
              message: "删除成功",
              type: "success",
              duration: 5 * 1000,
            });
            this.getList();
          }
        })
        .catch((error) => {
          console.log("save error", error);
        });
    },
    getProperty() {
      getProperty().then((res) => {
        this.form = {
          is_valid: "",
          is_public: "",
          title: "",
          no: "",
          stock: "",
          picture: "",
          unit: "",
          factory: "",
          height: "",
          weight: "",
          level: "",
          component: "",
          widthheight: "",
          widthlow: "",
          is_sealing: "",
          region: "",
          country: "",
          customer_name: "",
          customer_number: "",
          sealing_time: "",
          plates: [],
          pro: {},
          sealing_status:''
        };
        res.data.forEach((v) => {
          this.form.pro[v.key] = {
            is_multiple: v.is_multiple,
            is_required: v.is_required,
            name: v.key_name,
            rid: v.value.rid,
            id: v.id,
          };
          var obj = {};
          if (v.is_multiple == 0) {
            obj[v.key] = "";
            this.form = Object.assign({}, this.form, obj);
          } else {
            obj[v.key] = [];
            this.form = Object.assign({}, this.form, obj);
          }
          if (v.value.rid == 0) {
            this.Property[v.key] = v.value;
          } else {
            this.Property[v.key] = [];
            this.PropertyS[v.key] = v.value;
          }
        });
        // console.log(this.Property);
        // console.log(this.form);
      });
    },
    upload(param) {
      this.downloadLoading = true;
      const data = new FormData();
      data.append("img", param.file);
      upload(data)
        .then((res) => {
          console.log(res);
          param.onSuccess(); // 上传成功的图片会显示绿色的对勾
          // this.form.picture = res.data.path;
          // this.form.picture.push({
          //   // name: res.data.name,
          //   url: this.baseurl + res.data.path,
          // });

          this.form.picture = res.data.path;
          this.downloadLoading = false;
          param.onSuccess(); // 上传成功的图片会显示绿色的对勾
        })
        .catch((error) => {
          this.downloadLoading = false;

          console.log(error);
          param.onError();
        });
    },
    handleCreate() {
      this.getProperty();
      this.dialogStatus = "create";
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.$refs["acForm"].clearValidate();
      });
    },
    PropertyS11(item, key, val) {
      Object.keys(this.form.pro).forEach((v) => {
        if (item.id == this.form.pro[v].rid) {
          var num = this.Property[key].options.indexOf(val);
          this.Property[v].options = this.PropertyS[v].options[num];

          if (this.form.pro[v].is_multiple == 0) {
            this.form[v] = "";
          } else {
            this.form[v] = [];
          }
        }
      });
    },
    updateData(id) {
      this.$refs["acForm"].validate((valid) => {
        if (valid) {
          if (id) {
            this.form.id = id;
          }
          this.Uloading = true;
          patternAdd(this.form)
            .then((res) => {
              if (res.code == "00000") {
                Message({
                  message: "操作成功",
                  type: "success",
                  duration: 2 * 1000,
                });
                this.Uloading = false;
                this.getList();
                this.dialogVisible = false;
              }
            })
            .catch((error) => {
              this.Uloading = false;
              console.log("patternAdd error", error);
            });
        } else {
          return false;
        }
      });
    },
    handleEdit(row) {
      this.form = Object.assign({}, this.form, row);
      console.log(this.form);
      this.dialogStatus = "update";
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.$refs["acForm"].clearValidate();
      });
    },

    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogImg = true;
    },
    //删除图片
    handleUpRemove(file, fileList) {
      this.form.picture = fileList;
    },

    imgImport(param) {
      this.loading = true;
      const fileObj = param.file;
      const form = new FormData();
      form.append("file", fileObj);
      imgImport(form, this.card_id)
        .then((res) => {
          console.log("imgImport res", res);
          Message({
            message: "导入成功",
            type: "success",
            duration: 2 * 1000,
          });
          this.loading = false;
          this.importVisible7 = false;
        })
        .catch((error) => {
          console.log("imgImport error", error);
        });
    },

    imgSaveToUrl(name) {
      // 用event或file
      this.cropperName = name;
      this.cropperModel = true;
    },
    handleUploadSuccess(res) {
      this.form.picture.push({
        url: this.baseurl + res.data.path,
      });
      console.log(this.form);
    },

    publicChangeTime() {
      if (this.publicTime == "" || this.publicTime == null) {
        Message({
          message: "请选择公开日期",
          type: "warning",
        });

        this.dateError = true;

        return false;
      }
      changePublic({ time: this.publicTime })
        .then((res) => {
          Message({
            message: "操作成功",
            type: "success",
            duration: 2 * 1000,
          });
          this.publicStatus = false;
        })
        .catch((error) => {
          this.publicStatus = false;

          console.log("changePublic error", error);
        });
    },

    ChangeViewPeople() {
      if (this.ViewIdlist == "" || this.ViewIdlist == null) {
        Message({
          message: "请选择人员",
          type: "warning",
        });
        this.dateError = true;
        return false;
      }
      console.log(this.pids);
      ChangeViewPeople({ ViewId: this.ViewIdlist ,pids:this.pids})
        .then((res) => {
          Message({
            message: "操作成功",
            type: "success",
            duration: 2 * 1000,
          });
          this.viewPeople = false;
          this.Uloading = false;
          this.getList();
        })
        .catch((error) => {
          this.viewPeople = false;

          console.log("changePublic error", error);
        });
    },
    openDialog1() {
      this.dateError = false
      this.publicStatus = !this.publicStatus
    },

  openDialog2() {
    console.log(this.pids);
    if (this.pids.length == 0) {
        Message({
          message: "请先选择花型",
          type: "warning",
        });

        this.dateError = true;
        return false;
    }else{
      this.dateError = false
      this.viewPeople = !this.viewPeople
    }
    }
  },
};
</script>

<style>
.avatar-uploader {
  width: 40%;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  background-color: #d9d9d9;
}

.avatar {
  width: auto;
  height: auto;
  max-width: 50%;
  max-height: 50%;
  display: block;
}
</style>
